<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
    <style>
        #component-style {
            background-color: lightgray;
            width: 100px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    count: 22,
                    msg: 'ddd'
                }
            },
            methods: {
                // handleAddOne(param) {
                //     this.count += param
                // }
                ddf(){
                    console.log(this === vm);
                    this.$data.msg = 'yuan'//与下面同等效果
                    this.msg = 'yuan';
                }
            },
            template: `
                <counter v-model:aaa="count"/>
                <span @click="ddf">{{msg}}</span>
            `
        });

        app.component('counter', {
            props: ['aaa'],
            methods: {
                addOne() {
                    console.log(this.aaa);
                    this.$emit('update:aaa', this.aaa + 2)
                }
            },
            template: `
         <div id="component-style" @click="addOne">{{aaa}}</div>
        `
        });
        const vm = app.mount("#app");
    </script>
</body>

</html>